<template>
	<view>
		<view class="banner">
			<image :src="item.url" mode=""></image>
			<view class="text">
				社交恐惧症量表（SPIN）
			</view>
		</view>
		<view class="titlebox">
			<view class="title">
				结果分析
				<view>

				</view>
			</view>
		</view>
		<view class="score" style="margin: 30rpx auto;padding: 30rpx;background-color: #fff;width: 92vw;">
			<view class="fenshu">{{score}}分</view>
			<!-- <view class="textsz">{{answer}}</view> -->
			<view class="textsz" ><text>{{answer}}</text></view>
		</view>
		<view class="evaluate">
			<view class="evabox">
				<textarea name="" v-model="msg" placeholder="留下你的评价" id="" cols="30" rows="10" />
				<view class="send" @click="sendMsg">
					<text>发送</text>
				</view>
			</view>


		</view>
		<view class="recommend">
			猜你需要
		</view>
		<view class="typetestcon">
			<scroll-view scroll-y="true" style="height: 1000rpx;">
				<view class="typetestconbox" v-for="(item,index) in typetestcon" :key="index" @click="testd(item.id)">
					<image :src="item.url" mode="aspectFill"></image>
					<view class="right">
						<view class="titlet">
							{{item.title}}
						</view>
						<view class="text">
							{{item.info}}？
						</view>
						<view class="bott">
							<view class="bleft">
								<text class="t1">￥{{item.newPrice}}</text>
								<text class="t2">￥{{item.price}}</text>
							</view>
							<view class="bright">
								{{item.personNum}}人 <text>测过</text>
							</view>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getAnswer,
		testEvaluate,
		testList,
		testInfo,
		addTestLog
	} from '../../api/api.js'
	export default {
		data() {
			return {
				typetestcon: [],
				answer: '',
				msg: '',
				score: 0,
				topicId: null,
				pageNum: 1,
				pageSize: 10,
				item: null
			};
		},
		onLoad(option) {
			if (option.id) {
				const data = {
					topicId: option.id,
					score: option.score,
					questionType: option.topicType,
					answer: JSON.parse(option.answer),
					answerIndexs: JSON.parse(option.answerIndexs)
				}
				console.log("option：", option)
				this.getAnswerInfo(data)
				this.score = option.score
				this.topicId = option.id
				this.getInfo(option.id)
			}

			this.getRemList()
		},
		methods: {
			addLog(data) {
				addTestLog(data).then(res => {
					// this.item = res.data
				})
			},
			getInfo(data) {
				testInfo(data).then(res => {
					this.item = res.data
				})
			},
			getRemList() {
				const data = {
					isRecommend: '1',
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				testList(data).then(res => {
					this.typetestcon = res.rows
				})

			},
			getAnswerInfo(data) {
				getAnswer(data).then(res => {
					if (res.data) {
						this.answer = res.data.info
						const param = {
							score: this.score,
							info: this.answer,
							topicId: this.topicId
						}

						this.addLog(param)
					}
				})
			},
			sendMsg() {
				const data = {
					msg: this.msg,
					topicId: this.topicId
				}
				testEvaluate(data).then(res => {
					if (res.code === 200) {
						this.msg = ''
						uni.showToast({
							title: '评价成功！',
							icon: 'success'
						})
					}
				})
			},
			testd(id){
			    uni.navigateTo({
			        url:'/pages/userSide/testDetails?id=' + id
			    })
			}
		}
	}
</script>

<style lang="scss">
    .score{
        .fenshu{
            width:150rpx;
            line-height: 150rpx;
            font-size: 50rpx;
            color: #49AAF5;
            font-weight: bold;
            margin: 20rpx auto;
            text-align: center;
        }
        .textsz{
            text-indent: 1rem;
            font-size: 30rpx;
            line-height: 45rpx;
            color: #333;
            
        }
    }
	.banner {
		width: 92vw;
		margin: 0 auto;
		position: relative;

		image {
			width: 92vw;
			height: 320rpx;
		}

		.text {
			color: #fff;
			font-size: 36rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 90vw;
			text-align: center;
		}
	}

	.titlebox {
		display: flex;
		justify-content: center;

		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #333;
			position: relative;

			view {
				width: 100%;
				height: 11rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background-color: #1989E1;
				border-radius: 20rpx;
				z-index: -3;
			}
		}
	}

	.evaluate {
		width: 92vw;
		margin: 0 auto;
		padding: 25rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.evabox {
			background-color: #EBEEF5;

			textarea {
				padding: 20rpx;
				height: 100rpx;
			}

			.send {
				text-align: right;
				padding: 20rpx;

				text {
					font-size: 26rpx;
					color: #49AAF5;
				}
			}
		}
	}

	.recommend {
		margin: 30rpx 0;
		overflow: hidden;
		text-align: center;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.typetestcon {
		border-radius: 15rpx;
		width: 92vw;
		margin: 0rpx auto;
		padding: 20rpx 0;

		.typetestconbox {
			padding: 30rpx;
			display: flex;
			background-color: #fff;

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 40rpx;
			}

			.right {
				width: 450rpx;

				.titlet {
					color: #333;
					font-size: 32rpx;

					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.text {
					font-size: 24rpx;
					color: #999;
					margin: 20rpx 0 25rpx;

					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.bott {
					display: flex;
					justify-content: space-between;

					.bleft {
						width: 50%;

						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;

						.t1 {
							font-size: 32rpx;
							color: #FF1A00;
							margin-right: 15rpx;
						}

						.t2 {
							color: #999;
							font-size: 24rpx;
							text-decoration: line-through;
						}
					}

					.bright {
						width: 50%;
						text-align: right;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						font-size: 24rpx;

						color:#333 text {
							ccolor: #999;
						}

					}
				}

			}
		}
	}
</style>
